<template>
  <div class="my">
    <page-header title="我的"></page-header>
    <div class="my-top">
    	<div class="avatar"><img :src="data.avatar || avatar"></div>
    	<p class="username">{{data.username || '用户名'}}</p>
    	<p class="phone">{{data.phone || ''}}</p>
    </div>
    <ul class="nav">
    	<li><router-link to="/personal/my">积分</router-link></li>
    	<li><router-link to="/personal/my">我的活动</router-link></li>
    	<li><router-link to="/personal/my">我的培训</router-link></li>
    	<li><router-link to="/personal/my">优惠券</router-link></li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
import PageHeader from 'components/page-header'
import avatarInit from '../../assets/image/logo_1.png'
export default {
  components: {
    PageHeader
  },
  data () {
    return {
      avatar: avatarInit,
      data: {}
    }
  },
  created() {
    this._initData()
  },
  methods: {
    _initData() {
      // 发送请求 mock
      let response = {
        token: '00001',
        username: null,
        phone: '12345678901',
       avatar: null
      }
      this.data = response
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.my{
	width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #e6e6e6;
  .my-top{
  	width: 100%;
  	height: 340px;
  	background: url('../../assets/image/my_bg.png') no-repeat center / cover;
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  	.avatar{
  		width: 120px;
			height: 120px;
			background-color: #dddddd;
			border: solid 2px #ffffff;
			border-radius: 50%;
			display: flex;
			align-items:center;
			justify-content: center;
			img{
				width: 59px;
				height: 59px;
			}
  	}
  	.username {
  		font-size: 32px;
			color: #ffffff;
			margin: 28px 0 22px 0;
  	}
  	.phone{
  		width: 234px;
			height: 40px;
			line-height: 40px;
			background-color:rgba(0,0,0,0.3);
			border-radius: 20px;
			font-size: 24px;
			color: #ffffff;
			text-align: center;
			&::before {
        display: inline-block;
        vertical-align: middle;
        content: '';
        width: 24px;
        height: 24px;
        background: url('../../assets/image/icon_phone.png') no-repeat left center / 17px 24px; 
      }
  	}
  }
  .nav{
  	margin-top: 20px;
  	width: 100%;
  	padding-left: 23px;
  	box-sizing: border-box;
  	background-color: #fff;
  	li{
  		width: 100%;
  		height: 85px;
  		line-height: 85px;
  		box-sizing: border-box;
  		padding-right: 44px;
  		border-bottom: 1px solid #ccc;
  		font-size: 0;
  		background: url('../../assets/image/icon_arrow_right.png') no-repeat right 23px center / 17px auto;
  		a{
  			display: inline-block;
  			width: 100%;
  			height: 100%;
  			font-size: 28px;
				color: #333333;
				&::before{
	  			display: inline-block;
	        vertical-align: middle;
	        content: '';
	        width: 50px;
	        height: 30px;
	        background: url('../../assets/image/icon_my_1.png') no-repeat left center / 28px 29px;
	  		}
  		}
  		&:nth-last-child(1) {
  			border-bottom: none;
  		}
  		
  		&:nth-child(2) {
  			a::before{
  				background-image: url('../../assets/image/icon_my_2.png');
  				background-size: 28px 30px;
  			}
  		}
  		&:nth-child(3) {
  			a::before{
  				background-image: url('../../assets/image/icon_my_3.png');
  				background-size: 28px 27px;
  			}
  		}
  		&:nth-child(4) {
  			a::before{
  				background-image: url('../../assets/image/icon_my_4.png');
  				background-size: 29px 21px;
  			}
  		}
  	}
  }
}

</style>
